<template>
	<layout>
		<view class="content">
			<img class="logo"
				src="http://oss.oact.net/User/18044/Banner/0-1602578969470006683.jpg?x-oss-process=image/resize,w_750,/format,jpg/quality,Q_80" />
			<uni-card>
				<view style="text-align: center;">
					<p><strong><span style="font-family: 微软雅黑;font-size: 14px">{{title}}</span></strong></p>
				</view>
			</uni-card>
			<view class="ranking-box">
				<view class="head-img">
					<img src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icons/ranking_list.png" />
				</view>
				<view class="ranking-content">
					<template v-for="(item, index) in ranks">
						<view class="ranking-list">
							<view class="rank-top">
								<template v-if="index===0">
									<img src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icons/ranking_1.png" />
								</template>
								<template v-else-if="index===1">
									<img src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icons/ranking_2.png" />
								</template>
								<template v-else-if="index===2">
									<img src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/icons/ranking_3.png" />
								</template>
								<template v-else>
									<view style="text-align:center;color:#333;font-weight:normal;">{{index+1}}</view>
								</template>
							</view>
							<view class="rank-info">
								<view class="rank-info-left">
									<view class="rank-info-portrait">
										<img :src="item.value.images" />
									</view>
									<view class="rank-info-content">
										<span style="color: #999;margin: 0 15rpx;">{{item.value.studentCode}}号</span>
										<span>{{item.reallyName}}</span>
									</view>
								</view>
								<view class="rank-info-right">
									打卡{{item.score}}天
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'

	export default {
		data() {
			return {
				title: "\"XXX\"团体摄影大赛",
				ranks: []
			}
		},
		onLoad() {
			const {
				setNavigationBarTitle
			} = this

			setNavigationBarTitle()
			this.getList();
		},
		components: {
			uniCard,
			layout
		},
		methods: {
			...mapActions(['setNavigationBarTitle']),
			getList() {
				uni.$u.http.get('/app/activity/rankList').then(res => {
					
						console.log(res);
						if(res.code==0)
						{
							res.data.forEach(item=>{
								this.ranks.push({
									score:item.score,
									value:JSON.parse(item.value)
								})
							})
						}
					}
				)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo {
			width: 100%;
			min-height: 100rpx;
		}

		.uni-card {
			width: 95%;
			border-radius: 5px;
			color: #333;
			font-size: .37333rem;
			text-align: justify;
			white-space: pre-wrap;
			line-height: 1.6;
		}

		.ranking-box {
			width: 95%;
			text-align: center;
			position: relative;

			margin: 20rpx 0;

			.head-img {
				img {
					width: 100%;
					height: 100rpx;
				}

				position: absolute;
				width: 350rpx;
				left: 0;
				right: 0;
				margin: auto;
			}

			.ranking-content {
				font-weight: 400;
				min-height: 500rpx;
				background: #FFFFFF;
				margin-top: 15rpx;
				border-radius: 5px;
				padding: 100rpx 5%;

				.ranking-list {
					line-height: 90rpx;
					height: 90rpx;
					text-align: left;
					display: flex;
					margin-bottom: 20rpx;

					.rank-top {
						width: 8%;
						margin: 0 4%;
						position: relative;

						img {
							position: absolute;
							margin: auto;
							top: 0;
							bottom: 0;
							width: 100%;
							height: auto;
						}
					}

					.rank-info {
						width: 78%;
						display: flex;

						.rank-info-left {
							text-align: left;
							width: 70%;
							display: flex;

							.rank-info-portrait {
								width: 120rpx;
								position: relative;

								img {
									position: absolute;
									margin: auto;
									top: 0;
									bottom: 0;
									width: 100%;
									height: auto;
								}
							}
						}

						.rank-info-content {}

						.rank-info-right {
							text-align: right;
							width: 30%;
						}
					}
				}
			}
		}

		.foot {
			color: #fff;
			margin: 20rpx 0;
		}
	}
</style>
